<template>
<div class = "addlabor-box">
    <div class="header-box">
        <el-input placeholder="搜索工班" v-model="search"></el-input>
        <div class="left">
            <el-button @click = "allowClassAddAllBtnClick(true)">赋予所有工班填写权限</el-button>
            <el-button type="danger" @click = "allowClassAddAllBtnClick(false)">清空所有工班填写权限</el-button>
        </div>
    </div>

    <div class = "center-box">
        <el-table :data="filterClassList" border style="width: 100%">
            <el-table-column type="index" width="77" />
            <el-table-column prop="className" label="工班" />
            <el-table-column prop="status" label="操作权限">
                <template #default="scope">
                    <el-checkbox v-model="scope.row.status" label="赋予添加权限" size="large" @change = "allowClassAddBtnClick(scope.row)"/>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
</template>

<script setup>
import {computed, reactive, ref} from "vue";
import {allowClassAdd, selectClass, selectPosition} from "../api";
import store from "../store";
import {debounce,throttle} from 'lodash';
const sleep = (timeout) => {
    return new Promise((resolve)=>{
        setTimeout(()=>{
            resolve();
        }, timeout)
    })
}
/**
 * 赋予工班所有权限
 * @param status true全赋予  false为清空
 */
let allowClassAddAllBtnClick = debounce(async (status)=>{
    for (let i = 0; i < classList.value.length; i++) {
        (function (i,status) {
            setTimeout( ()=> {
                classList.value[i].status = status;
                let data = {
                    classNum: classList.value[i].classId,
                    state: classList.value[i].status
                }
                allowClassAdd(data).then(async (res) => {
                    if(res.code === 200){
                        // console.log(res);
                    }else{
                        console.log(res);
                    }
                },(error)=>{
                    console.log(error);
                });
            }, 50*i);
        })(i,status);
    }
},500);


/**
 * 赋予一个工班权限
 * @param classItem 工班信息
 */
let allowClassAddBtnClick = debounce((classItem)=>{
        let data = {
            classNum: classItem.classId,
            state: classItem.status
        }
        allowClassAdd(data).then((res) => {
            if(res.code === 200){
                console.log(res);
            }else{
                console.log(res);
            }
        },(error)=>{
            console.log(error);
        });
    }
,500);

let staffInfo = computed(()=>{
    return store.state.staffInfo;
})
let positionList = computed(()=>{
    return store.state.positionList;
})
let classList = computed(()=>{
    if(staffInfo.value.jurisdiction > 1){
        return store.state.classList;
    }else
    {
        return [{
            className: staffInfo.value.userName,
            classId: staffInfo.value.userNum
        }]
    }
});


const search = ref('')
const filterClassList = computed(() =>
    classList.value.filter(
        (data) =>
            !search.value || data.className.includes(search.value) //员工的姓名
    )
)

</script>

<style scoped lang="scss">
.addlabor-box{
    padding: 10px;
    .header-box{
        position: relative;
        padding-bottom: 10px;
        display: flex;
        &>*{
            margin-right: 5px;
        }
        .el-input{
            width: 250px;
        }
        .left{
            position: absolute;
            right: 10px;
        }
    }
    .center-box{
        width: 100%;
        height: calc(100vh - 120px);
        overflow: auto;
    }
}

</style>
